<template>
    <div id="apply" class='app apply' v-loading="loading" :style="{'backgroundImage':bgImg}" v-if="loginType==''">
      <div id="preloader-body" style='display:none'>
          <div id="cube-wrapper" style='display:none'>
              <div class="cube-folding">
                  <span class="leaf1"></span>
                  <span class="leaf2"></span>
                  <span class="leaf3"></span>
                  <span class="leaf4"></span>
              </div>
              <span class="loading" data-name="Loading">Loading</span>
          </div>
      </div>
     
      <div class='header'>
         <img :src="bgImg2" />
         <div style='display:inline-block;text-align:left;vertical-align: middle;margin-left:15px'> 
             <div class='header_title'>{{title}}</div>
             <div class='header_title_en' >{{title_en}}</div>
         </div>
      </div>
     
      <router-view/>
      <div class="container" v-if="isNormal">
          <div class='login'>
             
              <div class="mod3">
                  <el-card class="box-card" style='width:100%;height:100%;padding:30px;box-sizing:border-box'>
                      <div class="layer1">
                          <div class="word4">
                             
                                 
                              欢迎登陆
                          </div>
                          <div class="mod4" id="errormsg"></div>
                         
                          <div class="mod5">
                              <div style='margin-bottom:5px;color:#140823;font-family: PingFangSC-Medium, PingFang SC;font-weight:500;padding-left:15px'>账号</div>
                              <el-input  type="text" id="account" name="account" v-model="account"  autocomplete="off" autofocus required oninvalid="setCustomValidity('用户名不能为空，请输入')" oninput="setCustomValidity('')" @focus="focuss" style='width:98%;border:0;background-color:#f5f5f5;color:#140823'></el-input>
                          </div>
                          <div class="mod6"></div>
                          <div class="mod7">
                              <div style='margin-bottom:5px;color:#140823;font-family: PingFangSC-Medium, PingFang SC;font-weight:500;padding-left:15px'>密码</div>
                              <el-input type="password" id="password" name="password" v-model="password" autocomplete="off" show-password required oninvalid="setCustomValidity('密码不能为空，请输入')" oninput="setCustomValidity('')"  @focus="focuss"  style='width:98%;background-color:#f5f5f5;color:#140823' @keyup.enter.native="login"></el-input>
                          </div>
                          <div class="mod6"></div>
                           <div >
                                <el-checkbox v-model="checked">记住密码</el-checkbox>
                          </div>
                          <div class="mod8"></div>
                          <div class="mod9" @click="login">
                              <el-button type="primary" style="width: 100%;background:#1b5eb8;border-radius: 30px !important;height:45px" >登录</el-button>
                          </div>
                        
                      </div>
                  </el-card>
                 
              </div>
             <!-- 三角形 -->
             <div class="triangle"></div>
          </div>
       
      </div>
      <div v-else class='waring_text'>
         <span v-if="!loading">非法请求，请检查！</span>
          
      </div>
     
     </div> 
     <div v-else-if="loginType=='login2'">
         <div id="preloader-body" style='display:none'>
             <div id="cube-wrapper"  style='display:none'>
                 <div class="cube-folding">
                     <span class="leaf1"></span>
                     <span class="leaf2"></span>
                     <span class="leaf3"></span>
                     <span class="leaf4"></span>
                 </div>
                 <span class="loading" data-name="Loading">Loading</span>
             </div>
         </div>
         <div class="homeapp" v-if="isNormal">
             <div >
                 <div class="bgclass1"></div>
                 <div class="bgclass2"></div>
                 <div class="bgclass3"></div>
                 <div class="bgclass4"></div>
             </div>
             <div class="home21"></div>
             <div class="home">
                 <div class='header_title' style='margin-bottom:15px;;vertical-align: middle;'><img :src="loginImg" style='width:45px;vertical-align: middle;margin-right:5px;'/>{{title}}</div>
                 
                 <div class="box">
                     <div class='login_text'>欢迎登陆</div>
                     <div class="mod4" id="errormsg"></div>
                     <el-input v-model="account" prefix-icon="el-icon-user" placeholder="账号" class="input"></el-input>
                     <el-input v-model="password" prefix-icon="el-icon-lock" placeholder="密码" class="input" show-password style='margin-bottom:8%' @keyup.enter.native="login"></el-input>
                     <div style='height:35px;width:100%;padding-left:40px;margin-bottom:10%;'> 
                         <el-checkbox v-model="checked" style='float:left'>记住密码</el-checkbox>
                     </div>
                     <el-button type='primary' class="input" @click='login'>登录</el-button>
                 </div>
             </div>
         </div>
         <div v-else class='waring_text'>
             非法请求，请检查！
         </div>
     </div>
         
 </template>
 <script>
 import Vue  from 'vue'
 import '../assets/css/common.css'
 export default {
   name: 'Home',
   components: {
    
   },
   data(){
       return {
          loginImg:"",
          isNormal:false,
          ipsssss:'',
          isLocalhost:'N',
          account:'',
          company:"",
          password:'',
          loading:true,
          isApp:"N",
          isYtj:"Y",
          filenames:'海门殡仪馆系统',
          sCode:"hmbyg",
          logo:"",
          bgImg:"http://8.136.193.200:8888/rootImg/gm/logobg3.png",
          bgImg2:"",
          title_en:"",
          title:"",
          checked: false,
          loginType:"",
          mainType:"",
          noTitleMenu:""
       }
   },
   beforeCreate(){
       
   },
   mounted(){
     
   },
   created(){
     sessionStorage.setItem("logout","loginHm")  
     document.documentElement.style.fontSize = document.documentElement.clientWidth*20/320 + 'px';  
     const originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
     if(this.$route.query.isLocalhost){
         this.isLocalhost=this.$route.query.isLocalhost;
     }
     if(this.$route.query.exurl){
         let exurl=this.$route.query.exurl;
         this.$router.push({path:exurl});
     }
     if(this.$route.query.mainType){
         this.mainType=this.$route.query.mainType
     }
     sessionStorage.setItem("mainType",this.mainType)
     
     if(this.$route.query.isDev){
        localStorage.setItem("isDev",this.$route.query.isDev);
     }else{
         localStorage.setItem("isDev","")
     }
     //alert(this.$route.query.title);
     if(this.$route.query.title){
         this.title=this.$route.query.title;
     }else{
         //this.title=localStorage.getItem("company");
     }
     if(this.$route.query.company){
         this.company=this.$route.query.company;
     }
      if(this.$route.query.msg){
         localStorage.setItem("osmsg",this.$route.query.msg)
     }
     if(this.$route.query.isApp){
         this.isApp=this.$route.query.isApp
         localStorage.setItem("isApp",this.isApp);
     }else{
         localStorage.setItem("isApp","");
     }
     if(this.$route.query.isYtj){
         this.isYtj=this.$route.query.isYtj
         sessionStorage.setItem("isYtj",this.isYtj);
     }else{
         sessionStorage.setItem("isYtj","");
     }
     
     if(this.$route.query.isAppTop){
         localStorage.setItem("isAppTop",this.$route.query.isAppTop)
     }else{
         localStorage.setItem("isAppTop","")
     }
     if(this.$route.query.sCode){
         this.sCode=this.$route.query.sCode
         localStorage.setItem("sCode",this.sCode);
     }else{
         //this.sCode=localStorage.getItem("sCode");
     }
     if(this.$route.query.filenames){
         this.filenames=this.$route.query.filenames
         localStorage.setItem("filenames",this.filenames);
     }else{
         localStorage.setItem("filenames","");
     }
 
    // alert(2)
     this.getTitle();
     window.onresize = ()=>{
         return(()=>{
                     //键盘弹起与隐藏都会引起窗口的高度发生变化
         const resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
         console.log("heihgt====="+resizeHeight);
         if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
           window.setTimeout(function () {
             document.activeElement.scrollIntoViewIfNeeded()
           }, 0)
         }
 
         if(resizeHeight-0<originalHeight-0){
         //当软键盘弹起，在此处操作
             console.log("进入到软键盘弹起=========");
             //alert("进入到软键盘弹起=========")
             document.querySelector('body').setAttribute('style', 'height:'+originalHeight+'px;');
             this.scrollerHeight=resizeHeight;
             
         }else{
             //当软键盘收起，在此处操作
             console.log("进入到软键盘收起=========");
             document.querySelector('body').setAttribute('style', 'height:100%;');
             this.scrollerHeight="100%";
             
         }
         })()
             
     }
     //alert(localStorage.getItem("autoLogin"));
     if(this.isApp=="Y"||localStorage.getItem("autoLogin")=="Y"){
         this.account=localStorage.getItem(this.sCode+"weidaUser");
         this.password=localStorage.getItem(this.sCode+"weidaPwd");
         if(this.account&&this.password&&this.$route.query.logout!="Y"){
             this.login();
         }
     }
     if(localStorage.getItem("checked")=="Y"){
         
         this.account=localStorage.getItem(this.sCode+"weidaUser");
         this.password=localStorage.getItem(this.sCode+"weidaPwd");
         this.checked=true;
     }
     window.setTimeout(function(){
         document.getElementById('cube-wrapper').style.display = "none";
         document.getElementById('preloader-body').style.display = "none";
     },2000)
     
     
   },
   mounted(){
   },
   methods:{
     
     getTitle(){
         localStorage.setItem("imgIp","http://8.136.193.200:8888");
         localStorage.setItem("imgytjIp","http://8.136.193.200:8888");
         if(this.sCode){
             this.$postEncrypt("api","api/common/getTitle",{sCode:this.sCode}).then(data=>{
                 
                 document.getElementById('cube-wrapper').style.display = "none";
                 document.getElementById('preloader-body').style.display = "none";
                 this.loading=false;
                 if(data[0].title){
                     this.isNormal=true;
                 }
                 let title=data[0].title.split("#");
 
                 this.title=title[0];
                 if(title.length>1){
                     this.title_en=title[1];
                 }else{
                     this.title_en="";
                 }
                 this.loginType=data[0].login;
                 this.noTitleMenu=data[0].noTitleMenu;
                 sessionStorage.setItem("noTitleMenu",this.noTitleMenu);
                 this.loginImg=data[0].loginImg;
                 sessionStorage.setItem("color",data[0].color)
              
                 localStorage.setItem(this.sCode+"gmType",data[0].gmType);
                // alert(localStorage.getItem(this.sCode+"gmType")+"="+data[0].gmType)
                 document.title=this.title; 
                 if(data[0].bgImg){
                     let bgImgs=data[0].bgImg.split('#');
                     let bgImg=bgImgs[0];
                     let bgImg2=bgImgs.length>1 ? bgImgs[1]:"";
                     //this.bgImg="url('"+localStorage.getItem("imgIp")+"/"+bgImg+"')";
                     
                     this.bgImg="url('"+bgImg+"')";
                     if(bgImg2){
                         this.bgImg2=bgImg2
                        // this.bgImg2=localStorage.getItem("imgIp")+"/"+bgImg2
                     }
                 }else
                     this.bgImg="url('../assets/img/bg/bg7.png')"
                 
                 if(!this.loginImg){
                     this.loginImg=this.bgImg2;
                 }
                 sessionStorage.setItem("logo",this.loginImg);
                 console.log(this.bgImg)
             })
         }else{
             this.loading=false;
             window.setTimeout(function(){
                 
                 document.getElementById('cube-wrapper').style.display = "none";
                 document.getElementById('preloader-body').style.display = "none";
             },1000)
         }
         
     },
     focuss(event){
        
        
     },
     login(){
 
        if(this.account==""){
             document.getElementById("errormsg").innerHTML="请输入账号!";
             return;
           
        }
        if(this.password==""){
             document.getElementById("errormsg").innerHTML="请输入密码!";
             return;
        }
       
         this.loading=true;
         let sef=this;
        
        
         localStorage.setItem("ismobile","N");
         if(this.isApp=="Y"||localStorage.getItem("autoLogin")=="Y"||this.checked){
             localStorage.setItem(this.sCode+"weidaUser",this.account);
             localStorage.setItem(this.sCode+"weidaPwd",this.password);
         }
         localStorage.setItem("checked",this.checked ? "Y":"N");
         
         //document.getElementById('cube-wrapper').style.display = "block";
         //document.getElementById('preloader-body').style.display = "block";
         this.$post('api','api/login/checkLogin',
           {
               account:escape(this.account),
               password:escape(this.password),
               company:escape(this.company),
               sCode:escape(this.sCode),
               isApp:this.isApp
           }
 
 
         ).then(data=>{
            
             this.loading=false;
             
             document.getElementById('cube-wrapper').style.display = "none";
             document.getElementById('preloader-body').style.display = "none";
            
             if(data[0].status=="error"){
                  document.getElementById("errormsg").innerHTML=unescape(data[0].msg+"！")
             }else{
                  let ips=data[0].ip;
                 data=data[0].data;
                 localStorage.setItem("ips",JSON.stringify(ips));
                 let token=data[0].token;
                 let company=data[0].company;
                 let username=data[0].username;
                 let userId=data[0].userId;
                 let url=data[0].url;
                 let isUpdatePwd=data[0].isUpdatePwd;
                 localStorage.setItem("autoLogin",data[0].autoLogin);
                 sessionStorage.setItem("token",token);
                 sessionStorage.setItem("groupName",data[0].groupName);
                 localStorage.setItem("company",company);
                 localStorage.setItem("username",username);
                 localStorage.setItem("userId",userId);
                 sessionStorage.setItem("isUpdatePwd",isUpdatePwd);
                 console.log("url===="+url);
                 //alert(localStorage.getItem("autoLogin"));
                 
                 if(this.isApp=="Y"){
                     sessionStorage.setItem("isApp","Y");
                     sessionStorage.setItem("filenames",this.filenames);
                     localStorage.setItem("isApp","Y");
                     let url="main";
                     if(this.mainType){
                         url=this.mainType;
                     }
                   
                     this.$router.push({path:"/"+url,query:{title:this.title,'isApp':'Y','filenames':this.filenames}});
                 }else if(this.isYtj=="Y"){
                     sessionStorage.setItem("filenames",this.filenames);
                     sessionStorage.setItem("isYtj",this.isYtj);
                     sessionStorage.setItem("path","/main?isYtj=Y&filenames="+this.filenames+"&title="+this.title)
                      this.$router.push({path:"/main?isYtj=Y&filenames="+this.filenames,query:{title:this.title}});
                 }else{
                     this.$router.push({path:url,query:{title:this.title}});
                     
                     localStorage.setItem("isApp","");
                 }
             }
         });
     }
 
   }
 }
 </script>
 
 <style scoped  src="../assets/css/loading.css">
 </style>
 <style scoped>
     .focusState {position: absolute;}
     .triangle{
         width: 0;
         height: 0;
         position: absolute;
         bottom: 0;
         right: 0;
         border-top: 30vh solid #b3b3b300;
         border-right: 30vw solid #f9f9f9;
     }
     .app{
         height:100%;
         width:100%;
         background-size: 100% 100%;
         display:flex;
         flex-direction: column;
         background-repeat: no-repeat;
        /* background-image:url('http://8.136.193.200:8888//rootImg/gm/logobg3.png');*/
     }
     .header{
         height:50px;
         font-size:28px;
         color:#020202;
         font-weight: bold;
         text-align: center;
         margin-top:0.8rem;
         display: flex;
         flex-direction: row;
         justify-content: center;
         align-items: center;
     }
     .header img{
         vertical-align: middle;
         width:0.6rem;
     }
     .header_title{
         vertical-align: middle;
         color:#fff;
         font-size:0.32rem;
         letter-spacing: 1px;
         text-shadow: 0px 2px 7px rgba(0, 0, 0, 0.5);
         font-family: PingFangSC-Heavy, PingFang SC;
     }
     .header_title_en{
         vertical-align: middle;
         color:#fff;
         font-size:0.18rem;
         font-family: ArialMT;
     }
     .container{
         width:100%;
         height:100%;
         text-align:center;
         flex:1;
         display:flex;
         flex-direction: column;
         justify-content: center;
         align-items:center;
         font-size:0.12rem;
     }
     .container >>> .el-input__inner{
         border:0;
     }
     body {
         margin: 0;
       }
       ::-webkit-scrollbar {
         display: none;
       }
      
     .login{
         width:5rem;
         height:100%;
         display:flex;
         flex-direction: row;
         /*background-color:rgba(0, 3, 12,0.46);*/
         border-radius: 7px;
         align-items: center;
         justify-content: center;
         min-width:350px;
         max-width:490px;
         overflow: hidden;
 
     }
     .boxMain{
         display: flex;
         flex-direction: row;
         width:100%;
     }
     .group1{
         text-align: left;
         padding:20px;
     }
     .group1 img{
         width:38px;
         float:left;
     }
     .group1 span{
         color:#fff;
         margin-left:10px;
         font-family: PingFangSC-Regular, PingFang SC;
         line-height: 32px;
         font-size:25px;
     }
     .mod2{
         height:58%;
         flex:1;
        /* min-height: 500px;*/
         background-size:100% 100% ;
         background-repeat: no-repeat;
     }
     .mod3{
         width:100%;
         height:58%;
        /* min-height:500px;*/
         background:#fff;
         box-sizing: border-box;
         text-align: left;
         min-height:400px;
         overflow: hidden;
         box-shadow:4px 15px 10px -15px #D8D8D8;
     }
     .mod3 >>> .el-card{
         overflow: hidden;
     }
     .mod3 >>> .el-card__body{
         overflow: hidden;
         position: relative;
     }
     .mod3 >>> .el-input__inner{
         background-color:#f5f5f5 !important;
     }
     .outer1{
         position:relative;
         height:100%;
         
     }
     .bottom{
         position: absolute;
         bottom: 0;
         text-align:left;
         padding:15px;
         color:#fff;
     }
     .word3{
         font-size:22px;
     }
     .txt1{
         font-size:22px;
     }
     .info1{
         font-size:12px;
         margin-top:15px;
     }
     .mod4{
         height:30px;
         color:red;
         line-height:30px;
         font-size:0.2rem;
         text-align:center;
     }
     .word4{
         margin-top:5%;
         font-size:0.24rem;
         font-weight: bold;
         color:#242424;
         
         font-family: PingFangSC-Heavy, PingFang SC;
     }
     .word4 span{
         border-bottom: 2px solid #405A77;
     }
     .mod5{
         text-align: left;
         width:100%;
         color:#405A77;
         font-size:14px
     }
     .mod6{
         height:0.3rem;
     }
      .mod7{
         text-align: left;
         width:100%;
         color:#405A77;
         font-size:14px
     }
     .mod8{
         height:60px;
     }
     .waring_text{
         font-size:50px;
         color:red;
         display:flex;
         flex-direction: column;
         justify-self: center;
         align-self:center;
     }
     .mod9{
         position: absolute;
         bottom:0px;
         width:100%;
     }
 
         
     .homeapp{
         width:100%;
         height:100VH;
         
     }
     .homeapp .home{
         width :100%;
         height :100%;
         display :flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
     }
         
     .homeapp .box{
         max-width:500px;
         width :40%;
         height: 65VH;
         min-height:500px;
         background-color: #ffffff;
         border: 30px solid rgba(255, 255, 255, 0.3);
         -webkit-background-clip: padding-box; /* for Safari */
         background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
         border-radius: 10px;
         display: flex;
        text-align: center;
         flex-direction: column;
         align-items: center;
         justify-content :center;
     }
     .homeapp .login_text{
         font-size:22px;
         font-weight: bold;
         margin-bottom:40px;
     }
     .homeapp .input{
         width: 90%;
         margin-bottom: 15%;
     }
     .homeapp .input >>> .el-input__inner {
         border-top: 0;
         border-left: 0;
         border-right: 0;
         border-radius:0;
     }
     .homeapp .home21{
         width: 100%;
         height :100%;
         background:url('../assets/login/bg1.jpg');
         background-size: 100% 100%;
         transform: scale(1.3);
         position :fixed;
         z-index: -1;
         
         animation:mymove 50s infinite;
         -webkit-animation:mymove 50s infinite; /*Safari and Chrome*/
         animation-direction:alternate;
         -webkit-animation-direction:alternate; /* Safari 和 Chrome */
         animation-delay:2s;
         -webkit-animation-delay:2s; /* Safari 和 Chrome */
     }
     .homeapp .bgclass1{
         background:url('../assets/login/bg1.jpg');
         background-size: 100% 100%;
     }
     .homeapp .bgclass2{
         background:url('../assets/login/bg2.jpg');
         background-size: 100% 100%;
     }
     .homeapp .bgclass3{
         background:url('../assets/login/bg3.jpg');
         background-size: 100% 100%;
     }
     .homeapp .bgclass4{
         background:url('../assets/login/bg4.jpg');
         background-size: 100% 100%;
     }
     @keyframes mymove {
         0%{
             transform: scale(1.3);
             background:url('../assets/login/bg1.jpg');
             background-size: 100% 100%;
         }
         33%{
             transform: scale(1.2);
             background:url('../assets/login/bg2.jpg');
             background-size: 100% 100%;
         }
         66%{
             transform: scale(1.1);
             background:url('../assets/login/bg3.jpg');
             background-size: 100% 100%;
         }
         100%{
             transform :scale(1);
             background:url('../assets/login/bg4.jpg');
             background-size: 100% 100%;
         }
     }
 </style>
 <style >
 .el-form-item__label{
     font-size:14px;
 }
 </style>